<template>
	<div class="main">
		<div class="header">
			<!-- 返回按钮 -->
			<i class="iconfont iconfanhui" @click="backCenter"></i>
			<div class="search">
				<div class="icon fl">
					<i class="iconfont iconsousuo"></i>
				</div>
				<input type="text" placeholder="搜索">
			</div>
			<div class="used fl">
				<user></user>
			</div>
		</div>
		<div class="sqmain size scrollbar" id="style-2">
			<div class="top">
				<span class="sqTitle">小鸡广场</span>
				<span class="message">快来看看大家分享生活中的美好瞬间吧！</span>
			</div>
			<ul class="squl">
				<li class="sqli" v-for="ablum in tabelData">
					<div class="ablumName">
						<span>{{ablum.ablumName}}</span>
					</div>
					<div class="imgs" @click="jumpShareview(ablum.shareId)">
						<!-- <img :src="ablum.imgurl" alt=""> -->
						<img :src="$store.state.baseHttp+ablum.shareCoverPath" alt="">
					</div>
					<div class="squser">
						<!-- <img :src="ablum.userheader" alt=""> -->
						<div class="userhead" @click="jumpUserMessage(ablum)">
							<img :src="$store.state.baseHttp+ablum.userCoverPath" alt="">
							<span>{{ablum.userName}}</span>
						</div>
						<!-- <span class="follow" v-if="ablum.userId == $store.state.userId">Me</span> -->
						<span class="follow"v-if="ablum.userId != $store.state.userId"  @click="follow(ablum)">{{!ablum.isfollow? '+ 关注' : '- 取消关注'  }}</span>
						<p class="describe"><i style="color: #6c6c6d; font-style: normal;">描述: </i>没有！</p>
					</div>
					<p class="iconp">
						<i class="iconfont iconpraise2" @click="praise(ablum)" :class="{colorRed:ablum.isLiked}"></i>
						<span>{{ablum.likesCount}}</span>
						<i class="iconfont iconshoucang" @click="collection(ablum)" :class="{colorRed:ablum.isColloctd}"></i>
						<span>{{ablum.colloctionsCount}}</span>
						<i class="iconfont iconpinglun"></i>
						<span>{{ablum.reviewsCount}}</span>
					</p>
				</li>
			</ul>
			<el-pagination
				  background
				  layout="prev, pager, next"
					:current-page="currentPage"
					@current-change="changePage"
				  :total="100">
				</el-pagination>
			</div>
		</div>
</template>

<script>
	import user from '@/components/public/User.vue'
	export default{
		components:{
			user
		},
		data(){
			return{
				tabelData:[],
				currentPage:1
			}
		},
		created() {
			this.getdata()
			this.getUserData()
		},
		activated() {
			this.getdata()
			this.getUserData()
		},
		methods:{
			//获取用户信息
			getUserData(){
			},
			//获取数据
			getdata(){
				let Cdata = this.$shareClass.Csquare(this.currentPage)
				this.$http.get('/api/share',Cdata).then(res=>{
					let Ddata = this.$shareClass.Dsquare(res.data.shares)
					this.tabelData = Ddata
				})
			},
			//页面改变时触发
			changePage(){
				this.getdata(this.currentPage)
			},
			backCenter(){
				this.$router.push('/home/personalCenter')
			},
			//跳转分享页
			jumpShareview(shareId){
				window.open(this.$store.state.localhost+'shareView/'+shareId)
			},
			//进入用户信息页
			jumpUserMessage(ablum){
				//录入目标用户信息
				this.$store.commit('updataUserId',ablum.userId)
				this.$router.push('/userMessage')
			},
			//点赞
			praise(ablum){
				if(ablum.isLiked){
					// 取消点赞
					let Cdata = this.$shareClass.CsquareUnlikes(ablum.shareId)
					this.$http.post('/api/share',Cdata).then(res=>{
						this.getdata();
						this.$message.success('取消点赞成功！')
					})
				}else{
					// 点赞
					let Cdata = this.$shareClass.CsquareLikes(ablum.shareId)
					this.$http.post('/api/share',Cdata).then(res=>{
						this.getdata();
						this.$message.success('点赞成功！')
					})
				}
			},
			//关注
			follow(ablum){
				if(ablum.isfollow){
					//取消关注
					
				}else{
					//关注
					this.$http.post('/api/user/'+ablum.userId+'/follow').then(res=>{
						console.log(res)
						this.$message.success('关注成功！')
						this.getdata();
					})
				}
			},
			//收藏
			collection(ablum){
				if(ablum.isColloctd){
					// 取消收藏
					let Cdata = this.$shareClass.CsquareUnColloct(ablum.shareId)
					this.$http.post('/api/share',Cdata).then(res=>{
						this.getdata();
						this.$message.success('取消收藏成功！')
					})
				}else{
					// 收藏
					let Cdata = this.$shareClass.CsquareColloct(ablum.shareId)
					this.$http.post('/api/share',Cdata).then(res=>{
						this.getdata();
						this.$message.success('收藏成功！')
					})
				}
			}
		}
	}
</script>

<style scoped="scoped">
	.ablumName{
		position: absolute;
    text-align: center;
    width: 100%;
    top: 0;
    font-size: 20px;
    padding: 5px 0;
    left: 0;
    background-color: rgba(0,0,0,.3);
    color: #fffce7;
	}
	.main{
		background-color: #f4f4f4;
	}
	.squser .follow {
		display: inline-block;
		margin-top: 22px;
		background-color: #d80000;
		color: #FFFFFF;
		font-weight: 400;
		height: 20px;
		padding: 2px 10px;
		cursor: pointer;
		border-radius: 5px;
		font-size: 12px;
		
	}
	.iconp  .colorRed{
		color: #f85f69;
	}
	.iconfanhui{
		font-size: 35px;
		position: absolute;
		left: 15px;
		top: 10px;
		cursor: pointer;
	}
	.el-pagination{
		position: relative;
		margin-left: 28%;
	}
	.iconp{
		width: 100%;
		height: 40px;
		text-align: center;
		color: white;
		line-height: 45px;
		position: absolute;
		bottom: 3px;
		left: -10px;
	}
	.iconp .iconpinglun{
		color: white;
		font-size: 20px;
	}
	.iconp span{
		font-size: 14px;
		position: relative;
		top: -2px;
	}
	.iconp i{
		font-size: 25px;
		margin-right: 5px;
		margin-left: 25px;
		vertical-align: top;
		color: #F7F7F7;
		cursor: pointer;
	}
	.squser{
		width: 100%;
	}
	.squl{
		padding: 20px;
		padding-bottom: 60px;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: 24% 24% 24% 24% ;
		grid-template-rows: 300px 300px 300px;
		grid-row-gap: 1.5%;
		grid-column-gap: 1.5%;
	}
	.sqli{
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
		position: relative;
		background-color: #cccccd;
		border-radius: 10px;
		overflow: hidden;
	}
	.sqTitle{
		position: absolute;
		bottom: 0;
		left: 20px;
		font-size: 55px;
		letter-spacing: 15px;
	}
	.userhead img {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background-color: whitesmoke;
		overflow: hidden;
		vertical-align: middle;
	}
	.userhead{
		height: 50px;
		width: 165px;
		white-space: nowrap;
		float: left;
		margin: 5px 5px 10px 5px ;
		cursor: pointer;
	}
	.userhead span {
		font-size: 18px;
		line-height: 60px;
		margin-left: 10px;
		font-weight: 600;
	}
	.squser p{
		width: 100%;
		font-size: 12px;
		color: #1d1d1d;
		text-indent: 1em;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.imgs{
		width: 100%;
		height: 180px;
		overflow: hidden;
		border-radius: 0 0 10px 10px;
		cursor: pointer;
	}
	.imgs img{
		width: 100%;
		height: 180px;
		object-fit: cover;
	}
	.size{
		background-color: #474747;
		width: 100%;
		height:calc(100% - 60px);
		padding: 20px;
		box-sizing: border-box;
		margin-bottom: 10px;
	}

	 .message{
		position: absolute;
		bottom: 5px;
		left: 300px;
		font-size: 25px;
		letter-spacing: 10px;
	}
	.sqmain{
		margin: 0 auto;
		width: 80%;
		background-color: #ffffff;
	}
	.sqmain .top{
		width: 100%;
		position: relative;
		height: 120px;
		font-family: 'rendong';
		border-bottom: 8px solid #003748;
	}
	.header{
		height: 60px;
		width: 100%;
		background:url(../../../assets/pngImg/head2@2x.png) ;
		background-size: auto 62px;
		position: relative;
		overflow: hidden;
	}
	.header .used{
		position: absolute;
		right: 100px;
		top: 0;
	}
	.header .search{
		width: 250px;
		height: 40px;
		margin-top: 10px;
		margin-left: 100px;
		border:solid 1px #003748 ;
		border-radius: 20px;
		background-color: #f5f5f5;
	}
	.header .search .icon{
		box-sizing: border-box;
		height: 40px;
		width: 40px;
		background-color: #f5f5f5;
		border-radius: 50%;
		z-index: 99;
	}
	.header .search .icon i{
		width: 30px;
		height: 30px;
		font-size: 20px;
		line-height: 40px;
		margin-left: 10px;
		cursor: pointer;
	}
	.header .search input {
		width: 200px;
		height: 40px;
		box-sizing: border-box;
		padding-left: 10px;
		font-size: 18px;
		line-height: 35px;
		border: none;
		color: #7f7f7f;
		background-color: #f5f5f5;
		border-radius: 0 20px 20px 0;
		z-index: 1;
	}
</style>
